/* eslint-disable no-unused-vars */
<template>
  <a-form ref="addConfig">
    <a-row :gutter="24">
        <a-form-item label="转单名称" :label-col="{ span: 3 }" :wrapper-col="{ span: 16 }">
          <a-input
            v-model="form.spuName"
            placeholder="请输入转单名称，长度不超过50!!"
            v-decorator="['转单名称', { rules: [{ required: true, message: '请输入转单名称！' }] }]"
          />
        </a-form-item>
    </a-row>

<a-row :gutter="24">
            <a-col span="10">
                    <a-form-item label="转后sku" :label-col="{ span: 8 }" :wrapper-col="{ span: 12 }">
                        <a-input
                                v-model="form.toSkuCode"
                                placeholder="请输入转后sku!!"
                                v-decorator="['转后sku', { rules: [{ required: true, message: '请输入转后sku!' }] }]"
                        />
                    </a-form-item>
            </a-col>
            <a-col span="14">
            <a-form-item label="收货地" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
                <a-select
                    mode="multiple"
                    showArrow
                    v-model="form.fromBeLocation"
                    placeholder="请选择"
                    style="width: 100%" :tokenSeparators="[',']" @change="fromLocationChange">
                        <a-select-option v-for="(item,index) in provinceList" :value="item.provinceName" :key="index+''">
                        {{item.provinceName}}
                        </a-select-option>
                    </a-select>
            </a-form-item>
        </a-col>
</a-row>

    <a-row :gutter="24">
            <a-col span="12">
               <a-form-item label="spu编码" :label-col="{ span: 6 }" :wrapper-col="{ span: 14 }">
                    <a-input
                        v-model="form.spuCode"
                        placeholder="spuCode!!"
                        v-decorator="['spuCode', { rules: [{ required: true, message: '请输入spuCode！' }] }]"
                    />
                </a-form-item>
            </a-col>
            <a-col span="12">
                <a-form-item label="分单总量" :label-col="{ span: 10 }" :wrapper-col="{ span: 12 }">
                    <a-input
                        v-model="form.mInterval"
                        placeholder="分单总量!!"
                        v-decorator="['分单总量', { rules: [{ required: true, message: '请输入分单总量！' }] }]"
                    />
                </a-form-item>
            </a-col>
    </a-row>
            <a-form-item label="下单时间" :label-col="{ span: 3 }"  :wrapper-col="{ span: 19 }">
                            <a-range-picker
                            style="width:400px;"
                              showTime
                              v-model="rangePicker"
                            format="YYYY-MM-DD HH:mm:ss"
                            @change="onProcessChange" />
              </a-form-item>

     <a-form-item label="状态" :label-col="{ span: 3 }" :wrapper-col="{ span: 18 }">
                <a-col span="12">
                    <a-radio-group @change="onStatusChange" v-model="form.transformStatus">
                            <a-radio :value="true">启用</a-radio>
                            <a-radio :value="false">禁用</a-radio>
                    </a-radio-group>
                </a-col>
                <a-col span="12">
            </a-col>
      </a-form-item>

    <a-form-item label="转单说明" :label-col="{ span: 3 }" :wrapper-col="{ span: 18 }">
            <a-textarea v-model="form.productAbout" placeholder="请输入转单说明，文字不超过100！" :rows="4" />
    </a-form-item>
  </a-form>
</template>
<script>

import { areaService, transFormService } from '@/services/index'
import moment from 'moment'
const formOrigin = {
  spuName: '',
  toSkuCode: '',
  spuCode: '',
  fromBeLocation: ['全部'],
  productAbout: '',
  mInterval: 100,
  effectiveDate: '',
  invalidDate: '',
  transformStatus: true,
}
export default {
  data () {
    return {
      provinceList: [],
      spuList: [],
      form: Object.assign({}, formOrigin),
      value: 0,
      rangePicker: []
    }
  },
  methods: {
    setDataByRecord (record) {
      if (record) {
        record = JSON.parse(JSON.stringify(record))
        record.fromBeLocation = record.fromBeLocation.split(',')
         const { effectiveDate, invalidDate } = record
        this.rangePicker = [ moment(effectiveDate), moment(invalidDate)]
        this.form = record
      } else {
        this.rangePicker = []
        this.form = Object.assign({}, formOrigin)
      }
    },
    loadData () {
      areaService.provinceList().then(
        ({ isSuccess, data }) => {
          if (isSuccess) {
            this.provinceList = [ { provinceName: '全部' }, ...data]
          }
        }
      )
    },
    onStatusChange (e) {
      this.form.transformStatus = e.target.value
    },
    onProcessChange (dates, [effectiveDate, invalidDate]) {
      this.form.effectiveDate = effectiveDate
      this.form.invalidDate = invalidDate
    },
    fromLocationChange (value) {
      console.log('value:', value)
      if (value.length > 1 && value.includes('全部')) {
        if (value[value.length - 1] == '全部') this.form.fromBeLocation = ['全部']
        else this.form.fromBeLocation = value.filter(s => s !== '全部')
        return
      }
      this.form.fromBeLocation = value
    },
    submit (callback) {
      const form = this.form
      const { spuName, toSkuCode, fromBeLocation, spuCode, productAbout, effectiveDate, invalidDate } = form
      if (spuName == '' || spuName.length > 50) {
        this.$message.warning('请输入转单名称且转单名称长度不超过50')
        return
      }
      if (toSkuCode == '') {
        this.$message.warning('请正确输入skuCode的转换Code！')
        return
      }
      if (effectiveDate == '' || invalidDate == '') {
        this.$message.warning('请正确输入分单的订单下单时间范围！')
        return
      }

      if (fromBeLocation.length == 0) {
        this.$message.warning('请正确选择分单的寄送地！')
        return
      }
      if (spuCode == '') {
        this.$message.warning('请选择spuCode！')
        return
      }
      // if (productAbout == '' || productAbout.length > 100) {
      //   this.$message.warning('请输入转单说明，文字不超过100！')
      //   return
      // }

      transFormService.addProduct(
        form
      ).then(
        ({ isSuccess, data, message }) => {
          if (isSuccess) {
            /*
            还原form
            */
            this.form = Object.assign({}, formOrigin)
            Object.assign(this, {
              spuCode: ''
            })
            this.$message.success(message)
            if (callback) callback()
          } else {
            this.$message.error(message)
          }
        }
      )
    }
  },
  created () {
    this.loadData()
  }
}
</script>
<style lang="css" scoped>

</style>
